/*学院审批人设置 */
<template>
  <div>
    <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
      <el-row :gutter="24" style="height: 50px;">
        <el-col :span="8">
          <el-form-item :label="$t('expertGroupSett.college')">
            <DictSelect clearable style="width: 100%" 
            filterable
              v-model="queryForm.condition.college" 
              :plzSelect="$t('internship.pleaseSelect')"
              :data="options.faculty" >
            </DictSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <h1 class="condition-title">{{$t('collegeSetup.approvers')}}</h1>
      <div class="edu-opertion-bar sub-title">
        <div class="float-right" style="display: flex;">
          <el-button type="primary" style="margin-left:10px" @click="increased">{{$t('collegeSetup.increased')}}</el-button>
        </div>
      </div>
      <edu-table :pagination="false" :selection='false' :order='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
        <edu-table-column :label="$t('expertGroupSett.college')" prop="collegeI18n"></edu-table-column>
        <edu-table-column :label="$t('collegeSetup.primaryApprovers')" prop="firstName"></edu-table-column>
        <edu-table-column :label="$t('collegeSetup.secondaryApprovers')" prop="secondName"></edu-table-column>
        <edu-table-column :label="$t('common.text.operation')" fit prop="operate" width="150">
          <template slot-scope="props">
            <el-button type="text"  @click="editInternEval(props.row)">{{$t('scoringItemSetting.edit')}}</el-button>
            <el-button type="text" @click="examineDelete(props.row)">{{$t('scoringItemSetting.delete')}}</el-button>
            <!-- <el-button type="text" @click="selectEvalBackout(props.row)">{{$t('interdisciplinaryManagement.backout')}}</el-button> -->
          </template>
        </edu-table-column>
      </edu-table>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.pageNum_"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="queryForm.pageSize_"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryForm.total_"
            style="float:right;margin-top:10px"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog width="40%" :title="title" :before-close="cancel" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref='formName' :rules="rules" label-suffix="：">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('expertGroupSett.college')" :label-width="formLabelWidth" prop="college">
              <DictSelect clearable style="width: 100%" 
                filterable
                @change="changeClick"
                v-model="form.college" 
                :disabled="titleData=='编辑'"
                :plzSelect="$t('internship.pleaseSelect')"
                :data="options.faculty" >
              </DictSelect>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('collegeSetup.primaryApprovers')" prop="" :label-width="formLabelWidth">
              <el-select
                v-model="form.firstNo"
                filterable
                remote
                :disabled="!form.college"
                clearable
                reserve-keyword
                :placeholder="$t('collegeSetup.numberQuery')"
                :remote-method="remoteMethodOne"
                style="width:100%" >
                <el-option v-for="item in options.approver"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code" >
               
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px" >{{ item.code }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('collegeSetup.secondaryApprovers')" prop="secondNo" :label-width="formLabelWidth">
              <el-select
                v-model="form.secondNo"
                filterable
                remote
                clearable
                :placeholder="$t('collegeSetup.numberQuery')"
                reserve-keyword
                :disabled="!form.college"
                :remote-method="remoteMethodTow"
                style="width:100%" >
                <el-option v-for="item in options.approverTow"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code" >
                <!-- @change="changeClick" -->
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px" >{{ item.code }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">{{$t('common.btn.cancel')}}</el-button>
        <el-button type="primary" @click="determine('formName')">{{$t('common.btn.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import competiManagementApi from 'common/src/api/subjectCompetition/competiManagement';
import { findTeacherInfoList } from 'common/src/api/studentinfo'
export default {
  
  data () {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        college: '',
        firstNo: '',
        secondNo: ''
      },
      title: '',
      titleData: '',
      rules: {
        college: [
          { required: true, message: this.$t('scoringItemSetting.pleaseSelect'), trigger: 'change' }
        ],
        firstNo: [
          { required: true, message: this.$t('scoringItemSetting.pleaseEnter'), trigger: 'change' }
        ],
        secondNo: [
          { required: true, message: this.$t('scoringItemSetting.pleaseEnter'), trigger: 'change' }
        ],
        upperLimit: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ],
        lowerLimit: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ] 
      },
      formLabelWidth: '120px',
      
      multipleSelection: [],
      provideData: {}, // 提供子组件表格数据
      queryForm: {
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
        condition:{
         college: ''
        }
      },
      options: {
        faculty: [],
        timeList: [],
        approverTow: [],
        approver: []
      },
      dataList: []
    };
  },
  created() {
    this.getOptions()
  },
  mounted() {
    this.postProjectListPage(this.queryForm)
  },
  methods: {
    changeClick() {
      // console.log(this.form);
      this.$set(this.form, 'firstNo', null)
      this.$set(this.form, 'secondNo', null)
      this.options.approver = []
      this.options.approverTow = []
      // this.form.firstNo = ''
      // this.form.secondNo = ''
    },
    // 工号改变获取数据
    remoteMethodOne(query) {
        if (!!query) {
            setTimeout(() => {
            findTeacherInfoList({
                condition: query,
                faculty: this.form.college,
                pageSize_: 100,
                pageNum_: 0
            }).then(res => {
                if (res && res.code == 200) {
                    res.data.list.forEach(row => {
                      row.name += '(' + row.code + ')';
                    })
                    this.options.approver = res.data.list
                }
                if(res && res.code == 200 && res.data.total === 0) {
                  findTeacherInfoList({
                      condition: query,
                      faculty: '',
                      pageSize_: 100,
                      pageNum_: 0
                  }).then(res => {
                      if (res && res.code == 200) {
                          res.data.list.forEach(row => {
                            row.name += '(' + row.code + ')';
                          })
                          this.options.approver = res.data.list
                      }
                  })
                }
            })
            }, 200);
        } else {
            this.options.approver = []
        }
    },
    // 工号改变获取数据
    remoteMethodTow(query) {
        if (!!query) {
            setTimeout(() => {
            findTeacherInfoList({
                condition: query,
                faculty: this.form.college,
                pageSize_: 100,
                pageNum_: 0
            }).then(res => {
                if (res && res.code == 200) {
                    res.data.list.forEach(row => {
                      row.name += '(' + row.code + ')';
                    })
                    this.options.approverTow = res.data.list
                }
                if(res && res.code == 200 && res.data.total === 0) {
                  findTeacherInfoList({
                      condition: query,
                      faculty: '',
                      pageSize_: 100,
                      pageNum_: 0
                  }).then(res => {
                      if (res && res.code == 200) {
                          res.data.list.forEach(row => {
                            row.name += '(' + row.code + ')';
                          })
                          this.options.approverTow = res.data.list
                      }
                  })
                }
            })
            }, 200);
        } else {
            this.options.approverTow = []
        }
    },
    // 字典获取
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["profession", 'X_PYLB', 'X_XWLX', 'X_XXXS', 'X_YX']
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            technicalList: "profession",
            degreeType: "X_XWLX",
            formLearning: "X_XXXS",
            faculty: "X_YX",
            TrainingLevel: "X_PYCC"
          },
          res.data,
          this.options
        );
        // console.log(this.options);
      });
    },
    validateWeight(rule, value, callback) {
      if (value >= 0 && value<=100) {
          let expReg = /^([0-9]{1,3})(\.\d{1})?$/
          // let expReg = /^([1-9]|[1-9]\d{1,6})(\.\d{1,3})?$/;
          if (!value) {
              callback(new Error(this.$t('scoringItemSetting.pleaseEnterScore')))
          } else if (!expReg.test(value)) {
              callback(new Error(this.$t('scoringItemSetting.pleaseEnterScore')))
          } else {
              callback()
          }
      } else {
          callback(new Error(this.$t('scoringItemSetting.pleaseEnterScore')))
      }
    },
    postProjectListPage(data) {
      competiManagementApi.projectcApproveGetPage(data).then(res => {
        // console.log(res, 'dfd');
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      })
    },
    // 重置
    resetSearch() {
      for (let key in this.queryForm.condition) {
        this.queryForm.condition[key] = '';
      }
      this.queryForm.pageNum_ = 1
      this.postProjectListPage(this.queryForm)
    },
    // 查询
    onSearch() {
      this.queryForm.pageNum_ = 1
      this.postProjectListPage(this.queryForm)
    },
    //点击出现弹框
    increased() {
      this.titleData = '新增'
      this.title = this.$t('collegeSetup.newApprover')
      // this.options.approver = []
      // this.options.approverTow = []
      this.dialogFormVisible = true;
    },
    editInternEval(data) {
      this.titleData = '编辑'
      this.title = this.$t('collegeSetup.editApprover')
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(data))
      this.form.college = data.college
      this.form.secondNo = data.secondName + '(' + data.secondNo+ ')'
      this.form.firstNo = data.firstName?data.firstName + '(' + data.firstNo + ')':''
    },
    // 删除
    examineDelete(data) {
      this.$delConfirm().then(() => {
        let obj = {
          id: data.id,
          college: data.college
        }
        competiManagementApi.projectcApproveDelete(obj).then(res => {
          this.$message.success(this.$t('internship.successfully'));
          this.queryForm.pageNum_ = 1
          this.postProjectListPage(this.queryForm)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('internship.cancelOpera')
        });  
      });
    },
    handleSelectionChange() {

    },
    // 分页
    handleSizeChange(val) {
      this.queryForm.pageNum_ = 1
      this.queryForm.pageSize_ = val
      this.postProjectListPage(this.queryForm)
    },
    // 分页
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.postProjectListPage(this.queryForm)
    },
    //取消
    cancel() {
      // for (let key in this.form) {
      //   this.form[key] = '';
      // }
      this.form = {}
      this.$refs['formName'].resetFields() 
      this.dialogFormVisible = false;
      
    },
    //确定
    determine(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            if (this.titleData == '新增') {
              competiManagementApi.projectcApproveAdd(this.form).then(res => {
                this.dialogFormVisible = false;
                for (let key in this.form) {
                  this.form[key] = '';
                }
                this.options.approver = []
                this.options.approverTow = []
                this.$message.success(this.$t('internship.successfully'));
                this.$refs['formName'].resetFields() 
                this.queryForm.pageNum_ = 1
                this.postProjectListPage(this.queryForm)
              })
            } else {
              let obj = {};
              obj.id = this.form.id
              obj.college = this.form.college
              obj.firstNo = this.form.firstNo.endsWith(')')?this.form.firstNo.split('(')[1].split(')')[0]:this.form.firstNo
              obj.secondNo = this.form.secondNo.endsWith(')')?this.form.secondNo.split('(')[1].split(')')[0]:this.form.secondNo
              // obj.secondNo = this.form.secondNo.split('(')[1].split(')')[0]
              competiManagementApi.projectcApproveEdit(obj).then(res => {
                this.dialogFormVisible = false;
                this.options.approver = []
                this.options.approverTow = []
                this.$message.success(this.$t('internship.successfully'));
                this.$refs['formName'].resetFields() 
                this.queryForm.pageNum_ = 1
                this.postProjectListPage(this.queryForm)
              })
            }
        }
      });
    }
  }
}

</script>


